import React from "react";
import { connect } from "react-redux";
import actions from "@/store/actions/profile";
import "./index.less";
import { Form, Button, message, Input, Row, Col } from "antd";
import NavHeader from "@/components/NavHeader";
import { UserOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import {Link} from "react-router-dom"
import axios from "@/api";

const Register = (props: any) => {
  const onFinish = (values: any) => {
    props.register(values);

  };
  const onFinishFailed = (error: any) => {
    // message.error("表单验证失败!" + error);
  };
  return (
    <div>
      <NavHeader history={props.history}>用户注册</NavHeader>
      <Form className='antd-custom-form'
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
      <Form.Item 
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入你的用户名!' }]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon"/>}  placeholder="用户名"/>
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入你的密码!' }]}
      >
        <Input prefix={<LockOutlined className="site-form-item-icon"/>} type="password"  placeholder="密码"/>
      </Form.Item>
      <Form.Item
        label="确认密码"
        name="confirmPassword"
        rules={[{ required: true, message: '请输入你的确认密码!' }]}
      >
        <Input prefix={<LockOutlined className="site-form-item-icon"/>} type="password"  placeholder="确认密码"/>
      </Form.Item>
      <Form.Item
        label="邮箱"
        name="email"
        rules={[{ required: true, message: '请输入你的邮箱!' }]}
      >
        <Input prefix={<MailOutlined className="site-form-item-icon"/>} type="email"  placeholder="邮箱"/>
      </Form.Item>
      <Form.Item style={{textAlign:"center"}}>
        <Button type="primary" htmlType="submit" className="login-form-button">
          注册
        </Button>
        已有账号:<Link to="/login">登录</Link>
      </Form.Item>
      </Form>
    </div>
  );
};

let mapStateProps = (state: any) => state.profile;
export default connect(mapStateProps, actions)(Register);
